<template>
  <view class="storeBox">
    <view class="checkStore" v-if="status == 0">
      <text class="name">{{ store.name }}</text>
      <text class="class">{{ store.cat_name }}</text>
      <text>手机号码 {{ store.mobile }}</text>
      <view class="pics" v-if="store.merchant_info">
        <view class="pic" v-for="(item,index) in store.merchant_info" :key="index">
          <image :src="item"></image>
        </view>
      </view>
      <view class="btns">
        <text @click="makeCall(store.mobile)">联系用户</text>
        <text @click="audit(2)">拒绝</text>
        <text class="agree" @click="audit(1)">通过</text>
      </view>
    </view>
    <view class="storeItem" v-else>
      <view class="storeInfo">
        <view class="storePic">
          <image :src="store.logo"></image>
        </view>
        <view class="info">
          <view class="name">
            <text>{{ store.name }}</text>
            <text>{{ status == 1 ? "待完善" : "已完成" }}</text>
          </view>
          <text class="class">商城类目 {{ store.cat_name }}</text>
        </view>
      </view>
      <view class="btns">
        <view class="appList">
          <text
            :class="[
              'iconfont',
              'icon-zhifubao1',
              store.app_status.includes('2') ? '' : 'blue',
            ]"
          ></text>
          <text
            :class="[
              'iconfont',
              'icon-weixin1',
              store.app_status.includes('1') ? '' : 'green',
            ]"
          ></text>
        </view>
        <view class="btn">
          <text
            v-if="store.app_status.includes('1')"
            @click="
              $utils.toUrl(
                '/new_store/main/info?id=' + store.store_id
              )
            "
            >微信</text
          >
          <text
            v-if="store.app_status.includes('2')"
            @click="
              $utils.toUrl(
                '/new_store/main/ali_info?id=' + store.store_id
              )
            "
            >支付宝</text
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    store: {
      type: Object,
      default: () => {
        return {};
      },
    },
    status: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      // 是否显示更多详情
      showMore: false,
    };
  },
  computed: {},
  methods: {
    makeCall(phone) {
      this.$utils.makePhoneCall(phone);
    },
    // 审核店铺
    audit(status) {
      let text =
        status == 1 ? this.$t("salesman.agree") : this.$t("salesman.refuse");
      uni.showModal({
        title: this.$t("list.confirm") + text + this.$t("salesman.store"),
        showCancel: true,
        cancelText: this.$t("person.cancle"),
        cancelColor: "#000000",
        confirmText: this.$t("list.confirm"),
        confirmColor: "#3CC51F",
        success: async (result) => {
          if (result.confirm) {
            const res = await this.$allrequest.merchant.audit(
              {
                id: this.store.id,
                status,
              },
              true
            );
            if (res.code == 0) {
              this.$emit("audit");
            }
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.storeBox {
  width: 726rpx;
  margin: 0 auto 12rpx auto;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  .checkStore {
    display: flex;
    flex-direction: column;
    font-size: 24rpx;
    color: #8c8c8c;
    .name {
      font-size: 28rpx;
      color: #262626;
      font-weight: 600;
    }
    .class {
      margin: 10rpx 0;
    }
    .pics {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 20rpx;
      .pic {
        width: 160rpx;
        height: 160rpx;
        background-color: #f6f6f6;
        border-radius: 10rpx;
        overflow: hidden;
        margin-right: 12rpx;
        margin-bottom: 16rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .pic:nth-child(4n) {
        margin-right: 0;
      }
    }
    .btns {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      text {
        height: 58rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 24rpx;
        border-radius: 999rpx;
        font-size: 24rpx;
        margin-left: 16rpx;
        background-color: #f2f2f2;
      }
      .agree {
        background-color: #fdf1f0;
        color: #f0250e;
      }
    }
  }
  .storeItem {
    .storeInfo {
      display: flex;
      .storePic {
        width: 160rpx;
        min-width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        overflow: hidden;
        background-color: #f2f2f2;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        margin-left: 20rpx;
        flex: auto;
        display: flex;
        flex-direction: column;
        font-size: 24rpx;
        color: #8c8c8c;
        .name {
          display: flex;
          justify-content: space-between;
          align-items: center;

          text:nth-child(1) {
            font-size: 28rpx;
            font-weight: 600;
            color: #262626;
          }
        }
        .class {
          margin-top: 10rpx;
        }
      }
    }
    .btns {
      margin-top: 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .appList {
        display: flex;
        align-items: center;
        text {
          margin-right: 18rpx;
          font-size: 60rpx;
          color: #8c8c8c;
        }
        .blue {
          color: #2e77fa;
        }
        .green {
          color: #31b70a;
        }
      }
      .btn {
        display: flex;
        align-items: center;
        text {
          height: 58rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 24rpx;
          border-radius: 999rpx;
          font-size: 24rpx;
          margin-left: 16rpx;
          color: #f0250e;
          background-color: #fdf1f0;
        }
      }
    }
  }
}
</style>